<link rel="stylesheet" href="../css/element.css">
<link rel="stylesheet" href="../css/main.css">

<!-- 引入组件库 -->
<script type="text/javascript" src="../js/vue.min.js"></script>
<script src="../js/element.js"></script>
<script src="../js/common.js"></script>
<script src="../js/jquery-1.10.2.min.js"></script>

<style>

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }


</style>

<!-- 模型一 -->
<div id="textUtil">
  <el-container>
    <el-header >
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >工具</el-breadcrumb-item>
        <el-breadcrumb-item>文本编辑</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
    <el-main >
      <el-card class="box-card" >
        <div slot="header" class="clearfix" style="margin-left: 10%;">

          <el-row gutter="20">
              <el-col :span="10" > <!--:offset="10"
               <div style="float: right;">
                
              </div> -->
                
              </el-col>
              <el-form :inline="true"  class="demo-form-inline">
                <el-form-item label="过滤：">
                  <el-input  v-model="spaceData" placeholder="需要过滤的内容"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="spaceAll()">过滤</el-button>
                  <el-button  type="primary" @click="rowToLine()">行合并</el-button>
                  <el-button  type="primary" @click="reset()">清空</el-button>
                </el-form-item>
              </el-form>
              
          </el-row>
          
          <el-row gutter="20">
            <el-form :inline="true"  class="demo-form-inline">
              <el-form-item label="替换：">
                <el-col :span="11">
                  <el-input  v-model="oldData" placeholder="待替换值"></el-input>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                  <el-input  v-model="newData" placeholder="新值"></el-input>
                </el-col>
                
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="changeAll()">替换</el-button>
              </el-form-item>
            </el-form>
          </el-row>

        </div>

        <div  class="text item" >
          <el-row type="flex" justify="space-around">
            <el-col :span="11" id="textFile">
              <el-input type="textarea"  v-model="jsonData" :autosize="{minRows: 2}"></el-input>
            </el-col>
            <el-col :span="11">
              <el-input type="textarea"  v-model="resultData" :autosize="{minRows: 2}"></el-input>
            </el-col>
          </el-row>
          
        </div>
      </el-card>
    </el-main>
  </el-container>
</div>


<script>


  var textUtil = new Vue({
  el: '#textUtil',
  data() {
      return {
        jsonData:"",
        resultData:"",
        spaceData:"",
        oldData:"",
        newData:"",
      }
    },
    methods: {
      rowToLine(){  //行合并
        if(this.jsonData!=""){
          this.resultData=this.jsonData.replace(/(^[\s\n\t]+|[\s\n\t]+|[\r\n]+|[\n]+$)/g, "")
        }
        
      },
      reset(){  //重置
        if(this.resultData!=""){
          this.resultData="";
        }
        
        if(this.jsonData!=""){
          this.jsonData="";
        }
        
      },
      spaceAll(){
        if(this.jsonData!=""){
          if(this.spaceData!=""){
            this.resultData=this.jsonData.replace(new RegExp(this.spaceData,'g'), "")
          }else{
            alert("请填写过滤条件")
          }
          
        }
      },
      changeAll(){
        if(this.jsonData!=""){
          if(this.oldData!=""&& this.newData!=""){
            this.resultData=this.jsonData.replace(new RegExp(this.oldData,'g'), this.newData)
          }else{
            alert("请填写替换条件")
          }
          
        }
      }
    }
  
})

var target = document.getElementById("textFile")
target.ondragenter = handleDrag; 
target.ondragover = handleDrag; 
function handleDrag(e) { 
  e.preventDefault(); 
} 
// reg=new RegExp("\n","g");
target.ondrop = function (e) { 
  var files = e.dataTransfer.files; 
  var selectedFile=files[0];
  var reader = new FileReader();
  reader.readAsText(selectedFile);//读取文件的内容
  // var text="<p>";	
  var context=reader.onload = function(){
    // text=text+this.result.replace(reg,"</p><p>")+"</p>";
    // textUtil.jsonData=text;
    textUtil.jsonData=this.result
  }
  
  e.preventDefault(); 
} 
</script>